<template>
    <view v-if="goods_info.goods_name" class="goods-detail-container">
        <!-- 轮播图区域 -->
        <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
            <!-- 1.把当前点击的图片索引,传递到preview()处理函数中 -->
            <swiper-item v-for="(item,i) in goods_info.pics" :key="i" @click="preview(i)">
                <image :src="item.pics_big"></image>
            </swiper-item>
        </swiper>
        
        <!-- 商品信息区域 -->
        <view class="goods-info-box">
            <!-- 商品价格 -->
            <view class="price">￥{{goods_info.goods_price}}</view>
            <!-- 商品信息主体区域 -->
            <view class="goods-info-body">
                <!-- 商品名字 -->
                <view class="goods-name">{{goods_info.goods_name}}</view>
                <!-- 收藏区域 -->
                <view class="favi">
                    <uni-icons type="star" size="18" color="gray"></uni-icons>
                    <text>收藏</text>
                </view>                
            </view>
            <!-- 运费 -->
            <view class="yf">快递:免运费</view>
        </view>
        
        <!-- 详情区域 -->
        <rich-text :nodes="goods_info.goods_introduce"></rich-text>
        
        <!-- 商品导航组件区域 -->
        <view class="goods_nav">
            <!-- fill:控制右侧按钮的样式 -->
            <!-- options:左侧按钮的配置项 -->
            <!-- buttonGroup:右侧按钮的配置项 -->
            <!-- click:左侧按钮的点击事件处理函数 -->
            <!-- buttonClick:右侧按钮的点击事件处理函数 -->
            <uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" 
            @click="onClick" @buttonClick="buttonClick" />
        </view>
    </view>
</template>

<script >
    import {mapState,mapMutations,mapGetters} from 'vuex'
    
    export default {
        computed:{
            //调用mapState方法,把m_cart模块中的cart数组映射到当前页面中,作为计算属性来使用
            //...mapState("模块名",["要映射的数据名称1","要映射的数据名称2"])
            ...mapState("m_cart",[]),
            ...mapGetters("m_cart",["total"])
        },
        //侦听器
        watch:{
            //1.监听 total值的变化,通过第一个形参得到变化后的新值
            //定义total侦听器,指向一个配置对象
            total:{
                //handler属性用来定义侦听器的function处理函数
                handler(newVal){
                    //2.通过数组的find()方法,找到购物车按钮的配置对象
                    const findResult=this.options.find(x => x.text==="购物车")
                    if (findResult){
                        //3.动态为购物车按钮的info属性赋值
                        findResult.info=newVal
                    }               
                },
                //immediate属性用来声明此侦听器,是滞在页面初次加载完毕后立即调用
                immediate:true
            }
        },
        data() {
            return {
                //商品详情对象
                goods_info:{},
                
                // 左侧按钮组的配置对象
                options:[{
                    icon:"shop",
                    text:"店铺"
                },{
                    icon:"cart",
                    text:"购物车",
                    info:0
                }],
                //右侧按钮组的配置对象
                buttonGroup:[{
                    text:"加入购物车",
                    backgroundColor:"#ff0000",
                    color:"#fff"
                },{
                    text:"立即购买",
                    backgroundColor:"#ffa200",
                    color:"#fff"
                }]
            };            
        },
        onLoad(options){
            const goods_id=options.goods_id
            this.getGoodsDetail(goods_id)

        },
        methods:{            
            //把m_cart模块中的addToCart方法映射到当前页面使用
            ...mapMutations("m_cart",["addToCart"]),
            
            async getGoodsDetail(goods_id){
                const {data:res}=await uni.$http.get("/api/public/v1/goods/detail",{goods_id})
                if(res.meta.status!==200) return $showMsg()
                // 使用字符串的replace()方法,为img标签添加行内的style样式,从而解决图片底部空白间隙问题
                //正则代换,把后缀名"webp"改为"jpg"
                res.message.goods_introduce=
                res.message.goods_introduce.replace(/<img /g,"<img style='display:block;'")
                .replace(/webp/g,"jpg")
                
                this.goods_info=res.message
            },
            // 定义点击处理函数,实现轮播图的预览效果
            preview(i){
                // 调用uni.previeImage()方法,用下面的配置对象,预览图片
                uni.previewImage({
                    //预览时,默认显示图片的索引
                    current:i,
                    // 所有图片url地址的数据
                    urls:this.goods_info.pics.map(x=>x.pics_big)
                })
            },
            //左侧按钮的点击事件处理函数
            onClick(e){
                //console.log(e.content)
                if(e.content.text==="购物车"){
                    uni.switchTab({
                        url:"/pages/cart/cart"
                    })
                }
            },
            // 右侧按钮的战事事件处理函数
            buttonClick(e){
                //console.log(e)
                if(e.content.text==="加入购物车"){
                    //组织商品的信息对象
                    const goods={
                        goods_id:this.goods_info.goods_id,
                        goods_name:this.goods_info.goods_name,
                        goods_price:this.goods_info.goods_price,
                        goods_count:1,
                        goods_small_logo:this.goods_info.goods_small_logo,
                        goods_state:true
                    }                    
                    //调用addToCart方法
                    this.addToCart(goods)
                    // this.store.commit("addToCart",goods)
                }
                
            }            
        }
    }
</script>

<style lang="scss">
swiper{
    height:750rpx;
    swiper-item{
        image{
            width: 100%;
            height: 100%;
        }
    }
}

.goods-info-box{
    padding: 10px;

    .price{
        color: red;
        font-size: 18px;
        margin: 10px 0;
    }    
    .goods-info-body{
        font-size: 13px;
        display: flex;
        justify-content: space-between;
        .goods-name{
            margin-right: 10px;
        }
        
        .favi{
            width: 100px;
            font-size: 12px;            
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            border-left: 1px solid #efefef;
            color: gray;
        }
    }
    .yf{
        font-size: 12px;
        color: gray;
        margin: 10px 0;
    }
}

.goods_nav{
    // 固定定位
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
}
// 解决底部内容被遮盖的问题
.goods-detail-container{
    padding-bottom: 50px;
}
</style>
